/* * @Author: Yejing * @Date: 2023-06-13 13:55:39 * @LastEditors: Yejing * @LastEditTime: 2023-07-20 16:23:39 * @Description: 店铺添加任务 */
<template>
	<view class="publish-task-page">
		<c-layout style="height: 210rpx;">
			<c-navigation-bar :title="title" slot="head" @searchEvent="searchEvent" @backEvent="goBack">
				<view class="more-box" slot="rightIcon" v-if="!followUrlData.taskId" @click="$u.route('pages/storyType/storeManagement/batchorders')">
					<view class="more-block">
						<u-icon name="order" color="#2d2d2d" size="58"></u-icon>
					</view>
				</view>
			</c-navigation-bar>

			<!-- <u-button :loading="isloading" slot="footer" class="footer" type="primary" @click="releaseTask" :disabled="disabled">
				<text v-if="followUrlData.taskId">
					{{$t('storeManagement.ModifyTask')}}
				</text>
				<text v-else>
					{{$t('storeManagement.publishTask')}}
				</text>
			</u-button> -->
		</c-layout>
		<view class="container-box">
			<titleInput v-model="form.taskName" focusColor="#2934D0" :title="$t('storeManagement.TaskName')" :maxlength="36"></titleInput>
			<titleInput v-model="form.taskInfo" focusColor="#2934D0" :title="$t('storeManagement.TaskDescription')"></titleInput>
			<view class="input-line">
				<text class="title">{{ $t('storeManagement.taskBenefitType') }}：</text>
				<text class="stip">{{ form.taskBenefitType }}</text>
			</view>
			<view class="input-line">
				<text class="title">{{ $t('storeManagement.taskDuration') }}：</text>
				<text class="stip">{{ form.taskDuration }}</text>
			</view>
			<view class="input-line">
				<text class="title">{{ $t('storeManagement.MissionPeriod') }}：</text>
			</view>
			<view class="input-line">
				<view class="example-body">
					<uni-datetime-picker v-model="dateTime" :start="Date.now()" type="daterange" rangeSeparator="to" />
				</view>
			</view>
			<view class="input-line">
				<text class="title">{{ $t('storeManagement.TaskGoods') }}：</text>
			</view>
			<!--商品集合-->

			<view class="input-line" @click="selectProduct">
				<u-icon name="plus" color="#B5BBC6" size="100"></u-icon>
			</view>
			<view class="input-line" v-for="(product, index) in productList" :key="product.id">
				<view class="product">
					<view class="left">
						<u-image :src="$u.file.getMedieUrl(product.image)" width="160rpx" height="154rpx"></u-image>
						<view class="text">
							<text class="name remove">{{ product.goodsName }}</text>
							<text class="intro remove">{{ product.goodsDesc }}</text>
						</view>
					</view>
					<view class="" style="text-align: center">
						{{ $t('product.quantityBoard') }}
						<u-number-box :min="1" :max="product.totalInventory" :index="index" v-model="product.selectNumber" @change="valChange"></u-number-box>
						<u-button @click="cancel(product)">{{ $t('system.cancel') }}</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class=""
			style="padding:0 30rpx;width: 100%;height: 160rpx;display: flex;justify-content: center;background-color: #fff;position: fixed;bottom: 0;z-index: 3;">

			<button type="primary" @click="releaseTask" :disabled="disabled" class="footer">
				<u-loading mode="flower" :show="isloading"></u-loading>
				<text v-if="followUrlData.taskId">
					{{ $t('storeManagement.ModifyTask') }}
				</text>
				<text v-else>
					{{ $t('storeManagement.publishTask') }}
				</text>
			</button>
		</view>

		<!-- 选择上商品-->
		<u-popup v-model="productPopup" closeable mode="bottom" height="60%" safe-area-inset-bottom :border-radius="35">
			<view class="product-popup">
				<view class="select">
					<!--                    <u-checkbox v-model="checked" @change="allCheck">全选</u-checkbox>-->
					<u-button type="primary" size="mini" @click="allCheck" style="margin-right: 20rpx">{{ $t('storeManagement.CheckAll') }}</u-button>
					<u-button type="success" size="mini" @click="add">{{ $t('system.affirm') }}</u-button>
				</view>
				<u-checkbox-group v-for="(item, index) in shopProductData" :key="item.id" v-model="checkProduct">
					<u-checkbox v-model="item.status" :name="item.id"></u-checkbox>
					<view class="product">
						<u-image width="176rpx" height="176rpx" :src="$u.file.getMedieUrl(item.image)"></u-image>
						<view class="right">
							<view>
								<view class="name remove">{{ item.goodsName }}</view>
								<view class="intro remove">{{ item.goodsDesc }}</view>
							</view>
							<text class="price">${{ item.price }}|{{ $t('product.residualInventory') }} {{ item.totalInventory }}</text>
						</view>
					</view>
				</u-checkbox-group>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: null,
			isloading: false,
			checked: false,
			form: {
				taskBenefitType: this.$t('storeManagement.PlatformSetting'),
				taskDuration: this.$t('storeManagement.PlatformSetting')
			},
			dateTime: [],
			productPopup: false,
			checkProduct: undefined,
			productList: [],
			shopProductData: [],
			//分页
			pagingObj: {
				pageSize: 20,
				pageNum: 1
			},
			postShopProductObj: {
				page: {
					size: 10,
					current: 1
				},
				data: {
					shopId: ''
				}
			},
			followUrlData: {},
			title: this.$t('storeManagement.publishTask'),
			disabled: false,
			selectStartTime: ''
		};
	},
	onShow() {
		this.isloading = false;
	},
	onLoad(val) {
		//获取店铺id
		this.followUrlData = val;
		this.postShopProductObj.data.shopId = this.followUrlData.shopId;
		//获取商铺商品信息
		this.getShopProductData();
		if (this.followUrlData.taskId) {
			this.title = this.$t('storeManagement.ModifyTask');
			this.$u.get('/app/shop/sell/task/taskDetail/' + this.followUrlData.taskId).then((res) => {
				this.form = res.data;
				this.dateTime = [res.data.taskStartTime, res.data.taskEndTime];
				res.data.goodsChildList.map((item) => {
					this.productList.push({
						id: item.id,
						goodsName: item.goodsName,
						image: item.image,
						selectNumber: item.quantitySold,
						totalInventory:item.quantitySold
					});
				});
			
			});
		}
	},
	methods: {
		valChange(e, index) {
			// this.productList[e.index]['target'] = e.value;
			this.$set(this.productList[e.index],"target",e.value)
			console.log(111111,this.productList);
		},
		//获取商铺商品信息
		getShopProductData() {
			this.$u.post('/app/shopGoodsInfo/userpage', this.postShopProductObj).then((res) => {
				this.shopProductData = res.data.records.filter(i=>{return i.totalInventory>0});
				this.shopProductData.map((item) => (item.status = false));
				this.shopProductData.forEach((item) => {
					item['selectNumber'] = item.totalInventory;
				});
			});
		},
		//选择商品
		selectProduct() {
			//获取商铺商品信息
			this.productPopup = true;
			this.checked = false;
			this.shopProductData = this.shopProductData.map((item) => {
				const data = this.productList.some((val) => val.id === item.id)
					? { ...item, status: true }
					: {
							...item,
							status: false
					  };
				return data;
			});
		},
		//全选
		allCheck() {
			this.shopProductData.map((item) => (item.status = !this.checked));
		},
		//添加商品
		add() {
			this.productList = this.shopProductData.filter((item) => item.status);
			this.productPopup = false;
			this.productList.forEach(item=>{
				item.target=item.selectNumber
			})
		},
		//取消选择
		cancel(item) {
			this.productList = this.productList.filter((product) => product.id != item.id);
		},
		//发布任务
		releaseTask() {
			if (!this.form.taskName) {
				this.$u.toast(this.$t('storeManagement.Enter') + this.$t('storeManagement.TaskName'));
				return;
			}

			if (!this.form.taskInfo) {
				this.$u.toast(this.$t('storeManagement.Enter') + this.$t('storeManagement.TaskDescription'));
				return;
			}
			if (!this.dateTime.length) {
				this.$u.toast(this.$t('storeManagement.Enter') + this.$t('storeManagement.MissionPeriod'));
				return;
			}
			if (this.productList.length <= 0) {
				this.$u.toast(this.$t('storeManagement.Enter') + this.$t('storeManagement.TaskGoods'));
				return;
			}

			if (this.dateTime) {
				this.form.taskStartTime = this.formattedDate(this.dateTime[0]) ;
				this.form.taskEndTime = this.formattedDate(this.dateTime[1]);
			}
			this.form.shopGoodsInfoList = [];
			this.productList.map((item) => {
				this.form.shopGoodsInfoList.push({
					shopGoodsInfoId: item.id,
					shopGoodsInfoName: item.goodsName,
					quantitySold: item.target
				});
			});
			// console.log(1111111,this.productList)
			// return;
			if (this.followUrlData.taskId) {
				this.isloading = true;
				//修改
				this.form.id = this.followUrlData.taskId;
				this.$u
					.put('/app/shop/sell/task/updateTask', this.form)
					.then((res) => {
						this.$u.toast(this.$t('storeManagement.ReviewTips'));
						this.disabled = true;
						let that = this;
						setTimeout(function () {
							this.isloading = false;
							that.$u.route('pages/storyType/storeManagement/batchorders');
						}, 1000);
					})
					.catch((res) => {
						this.isloading = false;
					});
			} else {
				this.isloading = true;
				//发布
				this.$u.post('/app/shop/sell/task/releaseTask', this.form).then((res) => {
					this.$u.toast(this.$t('storeManagement.ReviewTips'));
					this.disabled = true;
					let that = this;
					setTimeout(function () {
						this.isloading = false;
						that.$u.route('pages/storyType/storeManagement/batchorders');
					}, 1000);
				}).catch(e=>{
						this.isloading = false;
				});
			}
		},

		formattedDate(time){
			const date = new Date(time);			
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, "0");
			const day = String(date.getDate()).padStart(2, "0");
			
			return  `${year}-${month}-${day}`;			
		},
		goBack(){
			uni.navigateTo({
				url:"/pages/storyType/storeManagement"
			})
		}
	}
};
</script>

<style lang="scss" scoped>

/deep/ .c-layout-container {
	height: 80px;
}
.publish-task-page {
	.container-box {
		position: absolute;
		top: 100px;
		bottom: 100px;
		left: 0;
		right: 0;
		overflow: auto;
		margin-top: 20rpx;
		.title-input {
			margin-bottom: 30rpx;
		}

		.input-line {
			display: flex;
			margin-bottom: 36rpx;

			.title {
				font-size: 28rpx;
				font-weight: 400;
				color: #000000;
				width: 260rpx;
			}

			.stip {
				font-weight: 400;
				color: #999cad;
				font-size: 28rpx;
				text-align: center;
			}

			.u-icon {
				width: 100%;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #e1e4e8;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				height: 138rpx;
			}

			/deep/ .example-body {
				width: 100%;

				.uni-date-x--border {
					border: 0 !important;
				}

				.uni-date-editor--x {
					background: #f6f7fb;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					padding: 30rpx 20rpx;
				}

				.uni-date__x-input {
					overflow: inherit;
				}

				.uni-date-x {
					background: transparent;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					opacity: 1;
				}
			}

			.product {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 20rpx;
				height: 200rpx;
				background: #ffffff;
				border-radius: 26rpx 26rpx 26rpx 26rpx;
				opacity: 1;
				border: 2rpx solid #e1e8e8;

				.left {
					display: flex;
					width: calc(100% - 210rpx);

					.text {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 10rpx;
						font-size: 24rpx;
						color: #91909a;
						width: calc(100% - 170rpx);

						uni-text {
							&:nth-child(1) {
								font-size: 28rpx;
								color: #1b1d29;
							}
						}
					}
				}

				.u-btn {
					width: 210rpx;
					height: 52rpx;
					background: #2934d0;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
					opacity: 1;
					color: #fff;
				}
			}
		}
	}

	.product-popup {
		padding: 80rpx 30rpx 30rpx 30rpx;

		.select {
			margin-bottom: 20rpx;

			u-btn {
				margin: 0;
			}
		}

		.u-checkbox-group {
			width: 100%;
			display: flex;
			position: relative;

			.u-checkbox {
				top: 30rpx;
				right: 0rpx;
				position: absolute;
			}
		}

		.product {
			display: flex;
			justify-content: space-between;
			padding: 22rpx 80rpx 22rpx 22rpx;
			border: 2rpx solid #e1e8e8;
			border-radius: 28rpx;
			margin-bottom: 20rpx;
			width: 100%;

			.right {
				width: calc(100% - 200rpx);
				font-size: 16px;
				color: #6a6a6a;
				padding: 2px 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 19px;
					color: #02010e;
				}

				.intro {
				}
			}
		}
	}

	.remove {
		overflow: hidden; //超出隐藏
		text-overflow: ellipsis; //溢出显示省略号
		white-space: normal; //常规默认，会折行
		display: -webkit-box;
		-webkit-box-orient: vertical; //子元素排列 vertical（竖排）orhorizontal（横排）
		-webkit-line-clamp: 2;
		/*内容限制的行数 需要几行写几就行*/
	}
}

.footer {
	background-color: #2934d0;
	width: 90%;
	height: 120rpx;
	line-height: 120rpx;
	font-size: 32rpx;
	border-radius: 20rpx;
	position: fixed;
	bottom: 0;
	z-index: 2;
	margin-bottom: 20rpx;
}

/deep/ .uni-calendar-item__weeks-box .uni-calendar-item--checked {
	background-color: #fff;
}

/deep/ .uni-calendar-item--checked .uni-calendar-item--checked-text {
	color: #001833;
}

/deep/ .uni-calendar-item--multiple .uni-calendar-item--after-checked {
	background-color: #007aff !important;

	.uni-calendar-item--checked-text {
		color: #fff !important;
	}
}
/deep/ .uni-calendar-item--multiple .uni-calendar-item--before-checked {
	background-color: #007aff !important;

	.uni-calendar-item--checked-text {
		color: #fff !important;
	}
}
</style>
